<template>
  <div class="dataComparison">
    <!-- 年度游客量数据对比展示页面 -->
    <div class="title">
      <p>年度游客量数据对比</p>
      <img src="../../images/dataScreen-title.png" alt="图片地址已失效"/>
    </div>
    <div class="charts" ref="refForCharts"></div>
  </div>
</template>

<script lang="ts" setup name="Year">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let refForCharts = ref<HTMLDivElement>() // 获取图表所在的DOM元素
onMounted(() => {
  let instanceOfEcharts = echarts.init(refForCharts.value as HTMLDivElement)
  instanceOfEcharts.setOption({
    title:{
      text:'散点图',
      left:'center',
      textStyle:{
        color:'white',
      },
    },
    xAxis:{
      type:'category',
      show:false,
    },
    yAxis:{
      show:false,
    },
    grid: {
      top: 20,
      left: 20,
      right: 20,
      bottom: 20,
    },
    series:[{
      type:'scatter', // 显示的图表是散点图
      data:[100,150,200,400,500,600,700,800,900,1000,1300,1500,1600,1700,1800,2000],
      symbol:'arrow', //设置标记（即散点图中的点的形状）是箭头
      symbolSize: 16, //设置标记的大小
      label:{
        show:true, //显示文本标签
        position:'top',
        color:'white', //设置文本标签的颜色

      },

    },]
})
})
</script>

<style lang="scss" scoped>
.dataComparison{
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title {
    // margin-left: 5px;
    p {
      color: white;
      font-size: 20px;
    }
  }
  .charts {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>